<template>
  <div class="top_o">
    <el-card class="box-card" :style="{height:WindowHeight - cardHeight + 'px'}">
      <el-tabs v-model="activeName">
        <el-tab-pane label="待办" name="first">
          <el-table :data="tableData1" :max-height="WindowHeight - tabHeight" border stripe highlight-current-row>
            <el-table-column label="序号" fixed type="index" width="60" align="center" />
            <el-table-column prop="oddNumber" label="报销单号" width="200" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.oddNumber)" v-text="scope.row.oddNumber" />
              </template>
            </el-table-column>
            <el-table-column prop="incident" label="报销事由" width="150" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.incident)" v-text="scope.row.incident" />
              </template>
            </el-table-column>
            <el-table-column prop="price" label="报销金额" width="150" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.price)">
                  <span v-text="scope.row.price" />
                  <span>元</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="报销部门" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.name)" v-text="scope.row.name" />
              </template>
            </el-table-column>
            <el-table-column prop="username" label="报销人" width="130" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.username)" v-text="scope.row.username" />
              </template>
            </el-table-column>
            <el-table-column prop="datatime" label="报销日期" align="center" />
            <el-table-column prop="dbpistatus" label="评审状态" width="140" header-align="center" />
            <el-table-column label="操作" header-align="center">
              <el-button size="small" type="info" @click="showFeiYongBX">查看</el-button>
              <el-button size="small" type="danger" @click="chulifeiYongBX">处理</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已发起" name="second">
          <el-table :data="tableData" :max-height="WindowHeight - tabHeight" border stripe highlight-current-row>
            <el-table-column label="序号" fixed type="index" width="60" align="center" />
            <el-table-column prop="oddNumber" label="报销单号" width="200" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.oddNumber)" v-text="scope.row.oddNumber" />
              </template>
            </el-table-column>
            <el-table-column prop="incident" label="报销事由" width="150" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.incident)" v-text="scope.row.incident" />
              </template>
            </el-table-column>
            <el-table-column prop="price" label="报销金额" width="150" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.price)">
                  <span v-text="scope.row.price" />
                  <span>元</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="报销部门" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.name)" v-text="scope.row.name" />
              </template>
            </el-table-column>
            <el-table-column prop="username" label="报销人" width="130" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.username)" v-text="scope.row.username" />
              </template>
            </el-table-column>
            <el-table-column prop="datatime" label="报销日期" align="center" />
            <el-table-column prop="dbpistatus" label="评审状态" width="140" header-align="center" />
            <el-table-column label="操作" align="center">
              <el-button size="small" type="info" @click="showFeiYongBX">查看</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="全部" name="four">
          <el-table :data="tableData" :max-height="WindowHeight - tabHeight" style="width:100%;" border stripe highlight-current-row>
            <el-table-column label="序号" fixed type="index" width="60" align="center" />
            <el-table-column prop="oddNumber" label="报销单号" width="200" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.oddNumber)" v-text="scope.row.oddNumber" />
              </template>
            </el-table-column>
            <el-table-column prop="incident" label="报销事由" width="150" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.incident)" v-text="scope.row.incident" />
              </template>
            </el-table-column>
            <el-table-column prop="price" label="报销金额" width="150" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.price)">
                  <span v-text="scope.row.price" />
                  <span>元</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="报销部门" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.name)" v-text="scope.row.name" />
              </template>
            </el-table-column>
            <el-table-column prop="username" label="报销人" width="130" header-align="center">
              <template slot-scope="scope">
                <div :class="setAlign(scope.row.username)" v-text="scope.row.username" />
              </template>
            </el-table-column>
            <el-table-column prop="datatime" label="报销日期" align="center" />
            <el-table-column prop="dbpistatus" label="评审状态" width="140" header-align="center" />
            <el-table-column label="操作" align="center">
              <el-button size="small" type="info" @click="showFeiYongBX">查看</el-button>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="bottom"><page /></div>
    </el-card>
    <el-button-group class="BtnAll">
      <el-button size="small" type="primary" @click="newFeiYongBX">新增报销信息</el-button>
    </el-button-group>
    <component :is="configName" />
  </div>
</template>
<script>
import page from '@/views/rfcwgl/components/PageS/index.vue'
import Vue from 'vue'
export default {
  components: { page },
  data() {
    return {
      configName: '',
      addPath: {
        configName: 'addfeiyongfbx',
        configFilePath: 'rfcwgl/feiYongBX/append/feiYongBXAppend/index.vue'
      },
      showPath: {
        configName: 'showfeiyongfbx',
        configFilePath: 'rfcwgl/feiYongBX/show/feiYongBXShow/index.vue'
      },
      chuliPath: {
        configName: 'editfeiYongBX',
        configFilePath: 'rfcwgl/components/chuLiYM/caiWuZJYM/index.vue'
      },
      WindowHeight: document.body.clientHeight,
      cardHeight: 84,
      tabHeight: 180,
      activeName: 'first',
      drawer: false,
      lookall: false,
      manage: false,
      hidmang: false,
      tableData: [
        {
          id: 1,
          name: '技术部',
          oddNumber: '145081511058',
          incident: '出差',
          price: 122.32,
          username: '张三',
          datatime: '2020-03-12',
          status: '部门审批',
          dbpistatus: '发起',
          pistatus: '结束'
        },
        {
          id: 1,
          name: '技术部',
          oddNumber: '145081511058',
          incident: '住宿',
          price: 122.43,
          username: '李四',
          datatime: '2020-03-16',
          status: '公司审批',
          pistatus: '结束',
          dbpistatus: ' 部门审批'
        },
        {
          id: 1,
          name: '技术部',
          oddNumber: '145081511058',
          incident: '会议',
          price: 182.87,
          username: '王五',
          datatime: '2020-03-23',
          status: '结束',
          pistatus: '结束',
          dbpistatus: ' 公司审批'
        }
      ],
      tableData1: [
        {
          id: 4,
          name: '财务部',
          oddNumber: '145081511058',
          incident: '出差',
          price: 12345,
          username: '张三',
          datatime: '2020-05-20',
          status: '经理审批',
          pistatus: '结束',
          dbpistatus: '经理审批'
        },
        {
          id: 3,
          name: '研发部',
          oddNumber: '145081511058',
          incident: '购买办公物品',
          price: 10300,
          username: '李四',
          datatime: '2019-01-22',
          status: '公司审批',
          pistatus: '结束',
          dbpistatus: ' 财务审批'
        },
        {
          id: 2,
          name: '销售部',
          oddNumber: '145081511058',
          incident: '聚餐',
          price: 5000,
          username: '王五',
          datatime: '2020-01-23',
          status: '结束',
          pistatus: '结束',
          dbpistatus: ' 部门审批'
        },
        {
          id: 4,
          name: '财务部',
          oddNumber: '145081511058',
          incident: '出差',
          price: 12345,
          username: '张三',
          datatime: '2020-05-20',
          status: '经理审批',
          pistatus: '结束',
          dbpistatus: '经理审批'
        },
        {
          id: 3,
          name: '研发部',
          oddNumber: '145081511058',
          incident: '购买办公物品',
          price: 10300,
          username: '李五四',
          datatime: '2019-01-22',
          status: '公司审批',
          pistatus: '结束',
          dbpistatus: ' 财务审批'
        },
        {
          id: 2,
          name: '销售部',
          oddNumber: '145081511058',
          incident: '聚餐',
          price: 5000,
          username: '王大拿',
          datatime: '2020-01-23',
          status: '结束',
          pistatus: '结束',
          dbpistatus: ' 部门审批'
        },
        {
          id: 4,
          name: '财务部',
          oddNumber: '145081511058',
          incident: '出差',
          price: 12345,
          username: '李小四',
          datatime: '2020-05-20',
          status: '经理审批',
          pistatus: '结束',
          dbpistatus: '经理审批'
        },
        {
          id: 3,
          name: '研发部',
          oddNumber: '145081511058',
          incident: '购买办公物品',
          price: 10300,
          username: '孙悟空',
          datatime: '2019-01-22',
          status: '公司审批',
          pistatus: '结束',
          dbpistatus: ' 财务审批'
        },
        {
          id: 2,
          name: '销售部',
          oddNumber: '145081511058',
          incident: '聚餐',
          price: 5000,
          username: '吴京',
          datatime: '2020-01-23',
          status: '结束',
          pistatus: '结束',
          dbpistatus: ' 部门审批'
        },
        {
          id: 2,
          name: '销售部',
          oddNumber: '145081511058',
          incident: '聚餐',
          price: 5000,
          username: '张长弓',
          datatime: '2020-01-23',
          status: '结束',
          pistatus: '结束',
          dbpistatus: ' 部门审批'
        },
        {
          id: 4,
          name: '财务部',
          oddNumber: '145081511058',
          incident: '出差',
          price: 12345,
          username: '赵得住',
          datatime: '2020-05-20',
          status: '经理审批',
          pistatus: '结束',
          dbpistatus: '经理审批'
        },
        {
          id: 3,
          name: '研发部',
          oddNumber: '145081511058',
          incident: '购买办公物品',
          price: 10300,
          username: '李铁牛',
          datatime: '2019-01-22',
          status: '公司审批',
          pistatus: '结束',
          dbpistatus: ' 财务审批'
        },
        {
          id: 2,
          name: '销售部',
          oddNumber: '145081511058',
          incident: '聚餐',
          price: 5000,
          username: '王五',
          datatime: '2020-01-23',
          status: '结束',
          pistatus: '结束',
          dbpistatus: ' 部门审批'
        }
      ]
    }
  },
  computed: {
    windowHeight() {
      return this.$store.state.windowH.height
    },
    tagsView() {
      return this.$store.state.settings.tagsView
    }
  },
  watch: {
    windowHeight: function(old, newd) {
      this.WindowHeight = old
    },
    tagsView: function(old, newd) {
      this.ifTagsView(old)
    }
  },
  created() {
    this.ifTagsView(this.$store.state.settings.tagsView)
  },
  methods: {
    ifTagsView(data) {
      if (data) {
        this.cardHeight = 84
        this.tabHeight = 180
      } else {
        this.cardHeight = 50
        this.tabHeight = 155
      }
    },
    openWndow(e) {
      this.configName = Vue.component(e.configName, resolve => {
        require([`@/views/${e.configFilePath}`], resolve)
      })
    },
    showFeiYongBX() {
      this.openWndow(this.showPath)
    },
    newFeiYongBX() {
      this.openWndow(this.addPath)
    },
    chulifeiYongBX() {
      this.openWndow(this.chuliPath)
    },

    // 点击保存按钮 保存页面的值到本地
    preserve() {
      var BasicData = JSON.stringify(this.basic)
      window.localStorage.setItem('BasicData', BasicData)
      window.localStorage.setItem('ReaSon', this.reason)
      window.localStorage.setItem('Remarks', this.remarks)
      this.$refs.canfeimingxi.openCanfeiMXShow()
      // this.$router.push({ path: 'examine' })
    },
    setAlign(data) {
      const type = typeof data
      // console.log(type)
      if (type === 'text') {
        return 'left'
      } else if (type === 'date') {
        return 'center'
      } else if (type === 'string') {
        return 'left'
      } else if (type === 'boolean') {
        return 'center'
      } else if (type === 'number') {
        // console.log(data)
        return 'right'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__header {
  margin: 0px;
}
</style>
